<template>
 <div>
<div class="paidban1">
    <el-container>
        <div id="app">
            <el-main>
                <el-row >
                    <el-col :span="15">
                        <el-calendar  v-model="doctorJobDate">
                        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                            <template slot="dateCell" slot-scope="{date, data}" >
                                <!--自定义内容-->
                                <div style=" height:100%"  >
                                    <div class="calendar-day" @click="deployUpdate(date, data)">{{ data.day.split('-').slice(2).join('-') }}
                                        <div v-for="item in calendarData" :key="item.value">
                                            <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                                                 <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                                                    <div class="is-selected">{{item.name}}：{{item.banci}}</div>
                                                </div> 
                                            </div> 
                                        </div>
                                   </div>
                                </div>
                            </template>
                        </el-calendar>
                    </el-col>
                    <el-col :span="9">
                        <el-tabs type="border-card" style="margin-top:110px">
                      
                                <el-form ref="deployForm"  :model="temp" label-position="left" label-width="100px" style="padding: 20px;">
                                    <el-form-item label="日期" prop="chiocdate">
                                          <el-input placeholder="日期"  suffix-icon="el-icon-date" v-model="chiocdate" style="width:200px"> </el-input>
                                    </el-form-item>

                                    <el-form-item label="科室" prop="keshis">
                                        <el-select filterable v-model="keshiId" placeholder="请选择科室" @visible-change="changeValue1($event)">
                                            <el-option v-for="item in keshis" :key="item.value" :label="item.name" :value="item.id"  style="width:200px"> </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="医生" prop="doctors">
                                        <el-select filterable v-model="doctorId" placeholder="请选择医生" @visible-change="changeValue2($event)">
                                            <el-option v-for="item in chdoctors" :key="item.id" :label="item.name" :value="item.id"  style="width:200px"> </el-option>
                                        </el-select>
                                    </el-form-item>

                                   

                                    <el-form-item label="班次" prop="state">
                                        <el-radio-group v-model="radiovalue" >
                                            <el-radio v-for="opt in radio1"  :key="opt.label" :label="opt.label">{{opt.label}}</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                            <el-button style="margin-left: 45%;margin-top: 15px;" size="medium" type="primary" plain @click="deployCreateData()">
                                            保存
                                            </el-button>
                                </el-form>
                           
                        </el-tabs>
                      
                        <el-tabs  type="border-card" style="text-align:center">
                            <el-input placeholder="日期"  suffix-icon="el-icon-date" v-model="chiocdate" style="width:200px"> </el-input>
                            <el-button type="primary" plain style="margin-left:10px" @click="panbanxq">查询排班详情</el-button>
                        </el-tabs>
                                </el-col>
                            </el-row>
                        </el-main>
                    </div>
            </el-container>
        </div>
        <!-- </el-container> -->
        <div class="paiban2" v-show="pbxqState">
            <el-table :data="paibanData" height="500"   border style="width: 100%">
                <el-table-column prop="ysName" label="姓名" width="180"></el-table-column>
                <el-table-column prop="keshiName" label="科室" width="180"></el-table-column>
                <el-table-column prop="banci" label="班次"  width="180"></el-table-column>
                <el-table-column prop="time" label="时间"  width="220"></el-table-column>
            </el-table>
            <el-button type="primary" @click="closexq" style="float:right;margin-right:20px">关闭</el-button>
        </div>
 </div>

</template>
     <script>
      const axios = require("axios");
      export default {
        data(){
            return {
                chdoctors:[],
                doctorJobDate: new Date(),
                chiocdate:'',
                doctors:[],
                doctorId: '',
                keshis: [],
                keshiId: '',
                radio1:[{label:"早班",value:'1'},{label:"午班",value:'2'},{label:"夜班",value:'3'}],
                radiovalue: 1,
                radio:'',
                calendarData: [
                    // { months: ['09', '21'],days: ['15'],name: '王甜甜',banci: '白班' },
                    // { months: ['08', '21'],days: ['16'],name: '徐佳佳',banci: '白班' },
                ],
                temp:{},
                pbxqState: false,
                paibanData: [],
                prekeshiId:''
            }
            },
            methods: {
                getBykeshi(){
                    axios.get("http://192.168.6.189:8080/hpl-doctor/getByDepId?id="+this.keshiId).then((r) => {
                        if(r.data.code == 200){
                            this.doctors = r.data.data;
                        } 
                    })
                },
                changeValue2(e){
                    if(e){
                         this.chdoctors.splice(0,this.chdoctors.length);
                        if(this.keshiId != ''){
                             //查当前科室的医生
                            axios.get("http://192.168.6.189:8080/hpl-doctor/getByDepId?id="+this.keshiId).then((r) => {
                                if(r.data.code == 200){
                                    //科室的医生
                                    let ads = r.data.data;
                                     //查当前时间还未排班的医生
                                    axios.get("http://192.168.6.189:8080/hpl-scheduling/getNoTime?time="+this.chiocdate).then((r) => {
                                        if(r.data.code == 200){
                                              let nds=r.data.data;
                                              for (const doctor of ads) {
                                                  for (const nd of nds) {
                                                      if(doctor.name == nd.name){
                                                          this.chdoctors.push(doctor);
                                                          break;
                                                      }
                                                  }
                                              }
                                            }
                                        })
                                        this.doctors = r.data.data;
                                } 
                            })
                        }
                    }
                },
                changeValue1(e){
                    if(e){
                        this.prekeshiId = this.keshiId;
                        if(this.chiocdate != ''){
                            //查科室
                            axios.get("http://192.168.6.189:8080/hpl-department/htGetAll").then((r) => {
                                if(r.data.code == 200){
                                    this.keshis = r.data.data;
                                }
                            })
                        }
                    }else{
                        if(this.prekeshiId != this.keshiId){
                            this.doctorId = null;
                        }
                    }
                },
                closexq(){
                    this.pbxqState=false;
                },
                deployCreateData() { 
                    axios.post("http://192.168.6.189:8080/hpl-scheduling/add",{
                    time:this.chiocdate,
                    doctorId: this.doctorId,
                    departId: this.keshiId,
                    banci:this.radiovalue
                }).then((r) => {
                    if (r.data.code === 200) {
                     let time = r.data.data.time;
                     let times = time.split("-");
                     let a={ months: [times[1], time[0]],days: [times[2]],name: r.data.data.ysName,banci: r.data.data.banci }
                     this.calendarData.push(a);
                     this.doctorId=null;
                     }
                    });
                },
                deployUpdate(date, data){
                       this.chiocdate= data.day;
                    },
                panbanxq(){
                    this.pbxqState=true;
                    axios.get("http://192.168.6.189:8080/hpl-scheduling/getByTime?time="+this.chiocdate).then((r) => {
                        if(r.data.code == 200){
                            this.paibanData = r.data.data;
                           
                        }
                    })
                    }                
                },
                mounted(){
                    // axios.get("http://localhost:8080/hpl-doctor/getAll").then((r) => {
                    //     if(r.data.code == 200){
                    //         this.doctors = r.data.data;
                    //     }
                    // })
                   
                    axios.get("http://192.168.6.189:8080/hpl-scheduling/htGetAll").then((r) => {
                        if(r.data.code == 200){
                            this.calendarData = r.data.data;
                        }
                    })
                }
      }
        </script>
<style>
    .is-selected {
        color: #1989FA;
        font-size: 12px;
    }
    .calendar-day{
        height:100%
    }
    .content_pai{
        line-height:24px;
        color: #606266;
    }
    .paiban2{
        position: absolute;
        top: 25%;
        width: max-content;
        border-radius:5px;
    }
 
</style>